<template>
  <div class="container" v-if="hotelData">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hotel' }">{{hotelData.real_city}}酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{hotelData.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="item">
      <h4>
        {{hotelData.name}}
        <span v-if="hotelData.hotellevel">
          <i class="iconfont iconhuangguan"></i>
          <i class="iconfont iconhuangguan"></i>
          <i class="iconfont iconhuangguan"></i>
          <i class="iconfont iconhuangguan"></i>
          <i class="iconfont iconhuangguan"></i>
        </span>
      </h4>
      <span>{{hotelData.alias}}</span>
      <br />
      <i class="el-icon-location-outline"></i>
      <span>{{hotelData.address}}</span>
    </div>
    <div class="pic">
      <div class="big">
        <img :src="bigImg" alt />
      </div>
      <div class="small">
        <img
          :src="img.url"
          alt
          v-for="(img,index) in imgUrl"
          :key="index"
          @click="getIndex(img.url)"
        />
      </div>
    </div>
    <div class="price" style="cursor: pointer">
      <el-table :data="hotelData.products" stripe style="width: 100% " @row-click="jump">
        <el-table-column prop="name" label="价格来源" width="420" height="48"></el-table-column>
        <el-table-column prop="bestType" label="低价方形" width="420" height="48"></el-table-column>
        <el-table-column label="最低价格/每晚" width="160" height="24">
          <template slot-scope="scope">
            <span class="large">￥{{scope.row.price}}</span>
            起
            <span>
              <i class="el-icon-arrow-right height-light"></i>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 地图风景/周边 -->
    <mapList />
    <!-- 酒店信息板块 -->
    <div class="info">
      <el-row>
        <el-col :span="4">
          <div class="info-hd">基本信息</div>
        </el-col>
        <el-col :span="20">
          <div class="info-ft">
            <div class="info-bd">入住时间: 14:00之后</div>
            <div class="info-bd">离店时间: 12:00之前</div>
            <div class="info-bd">{{hotelData.creation_time}} / {{hotelData.renovat_time}}</div>
            <div class="info-bd">酒店规模: {{hotelData.roomCount}}间客房</div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="info-hd">主要设施</div>
        </el-col>
        <el-col :span="20">
          <div class="info-sd" v-if="hotelData.hotelassets">
            <span class="info-bd-sd" v-for="(item,index) in hotelassets" :key="index">{{item.name}}</span>
          </div>
          <div class="info-sd" v-else>-</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="info-hd">停车服务</div>
        </el-col>
        <el-col :span="20">
          <div class="info-bd info-hd" v-if="hotelData.parking">{{hotelData.parking}}</div>
          <div class="info-bd info-hd" v-else>-</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="info-hd">品牌信息</div>
        </el-col>
        <el-col :span="20">
          <div class="info-bd info-hd" v-if="hotelData.hotelbrand">{{hotelData.hotelbrand.name}}</div>
          <div class="info-bd info-hd" v-else>-</div>
        </el-col>
      </el-row>
    </div>
    <!-- 评论评价板块 -->
    <div class="comment">
      <h4>0条真实用户评论</h4>
      <div class="comment-list">
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-dark">
              <p>总评数 : {{hotelData.all_remarks}}</p>
              <p>好评数 : {{hotelData.good_remarks}}</p>
              <p>差评数 : {{hotelData.bad_remarks}}</p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grade">
              <div class="comment-star">
                <!-- value -->
                <el-rate
                  disabled
                  :value="hotelData.stars"
                  show-score
                  text-color="#f7ba2a"
                  score-template="{value}分"
                ></el-rate>
                <div class="stamp">推荐</div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="ball">
              <el-progress
                v-if="environmentRates"
                type="circle"
                :percentage="environmentRates"
                :width="70"
                color="#f7ba2a"
                status="warning"
                :stroke-width="2"
              ></el-progress>
              <span class="ball-word">
                <span class="ball-text">环境</span>
                <span class="ball-value" v-if="hotelData.scores">{{hotelData.scores.environment}}</span>
              </span>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="ball">
              <el-progress
                v-if="productRates"
                type="circle"
                :percentage="productRates"
                status="warning"
                :width="70"
                color="#f7ba2a"
                :stroke-width="2"
              ></el-progress>
              <span class="ball-word">
                <span class="ball-text">产品</span>
                <span class="ball-value" v-if="hotelData.scores">{{hotelData.scores.product}}</span>
              </span>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="ball">
              <el-progress
                v-if="serviceRates"
                type="circle"
                :percentage="serviceRates"
                color="#f7ba2a"
                status="warning"
                :width="70"
                :stroke-width="2"
              ></el-progress>
              <span class="ball-word">
                <span class="ball-text">服务</span>
                <span class="ball-value" v-if="hotelData.scores">{{hotelData.scores.service}}</span>
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import mapList from "@/components/hotel/mapList";
export default {
  components: {
    mapList
  },
  created() {
    this.$axios({
      url: "/hotels",
      params: {
        id: this.$route.params.id
      }
    }).then(res => {
      // 获取酒店详情数据
      console.log(res.data.data);
      this.hotelData = res.data.data[0];
      this.hotelassets = this.hotelData.hotelassets;
    });
  },

  computed: {
    environmentRates() {
      let amn = { ...this.hotelData.scores };
      let min = (amn.environment / 10) * 100;
      // console.log(min);
      return min;
    },
    productRates() {
      let amn = { ...this.hotelData.scores };
      let min = (amn.product / 10) * 100;
      // console.log(min);
      return min;
    },
    serviceRates() {
      let amn = { ...this.hotelData.scores };
      let min = (amn.service / 10) * 100;
      return min;
    }
  },
  data() {
    return {
      hotelData: {},
      products: [],
      hotelassets: [],
      // hotelassets: {},
      imgUrl: [
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114069969&di=32082550274070603fa660d7107744a6&imgtype=0&src=http%3A%2F%2Fjianfangmi.com%2Fdata%2Fattachment%2Fforum%2F201706%2F08%2F210951rttzdvotoi7po8ov.jpg"
        },
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596113811223&di=a571593609c08027193bee8104dc3b8d&imgtype=0&src=http%3A%2F%2Fstatic-xiaoguotu.17house.com%2Fxgt%2Fs%2F05%2F1463088241173135.jpg"
        },
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114069985&di=83af5283fb5ba9c3d7d5cc5837928afd&imgtype=0&src=http%3A%2F%2Fbbsfile.co188.com%2Fforum%2F201303%2F09%2F182200r0cm8mdm5u4mx4sc.jpg"
        },
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114069980&di=e6d777f70930a2d8e54500d1c1f7e52d&imgtype=0&src=http%3A%2F%2Fstatic-xiaoguotu.17house.com%2Fxgt%2Fm%2F01%2F1462727238186.jpg"
        },
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114069974&di=679b6a5bcf1b12ba2335fb857a29931c&imgtype=0&src=http%3A%2F%2Fimg.zx123.cn%2FResources%2Fzx123cn%2Fuploadfile%2F2017%2F0208%2F7eec5d9f07ab5e90b43415dd56bc1ff3.jpg"
        },
        {
          index: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114132527&di=4a87835f272ea63686835cbf02992564&imgtype=0&src=http%3A%2F%2Fimage2.cnpp.cn%2Fupload2%2Fgoodpic%2F20140425%2Fimg_283362_6_88.jpg"
        }
      ],
      bigImg:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596114069969&di=32082550274070603fa660d7107744a6&imgtype=0&src=http%3A%2F%2Fjianfangmi.com%2Fdata%2Fattachment%2Fforum%2F201706%2F08%2F210951rttzdvotoi7po8ov.jpg",
      value: ""
    };
  },
  methods: {
    getIndex(img) {
      this.bigImg = img;
      console.log(this.bigImg);
    },
    jump() {
      // 跳转外部链接方法,不能使用router.push
      window.open("https://hotels.ctrip.com/hotel/694679.html");
    }
  }
};
</script>

<style lang="less" scoped>
* {
  font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}
ol {
  list-style: none;
}
.container {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.header {
  padding: 20px 0;
  overflow: hidden;
}
h4 {
  font-size: 24px;
  font-weight: 400;
  word-spacing: 1px;
  .iconhuangguan {
    font-size: 16px;
    font-style: normal;
    color: #f90;
  }
}
.item {
  span {
    font-size: 14px;
    color: #606266;
  }
}
.pic {
  margin: 40px 0;
  display: flex;
  .big {
    > img {
      height: 360px;
      width: 640px;
    }
  }
  .small {
    padding-left: 10px;
    // padding-right: 10px;
    img {
      width: 160px;
      height: 110px;
      margin: 0 0 10px 10px;
      cursor: pointer;
    }
    img:nth-child(even) {
      margin-left: 15px;
    }
  }
}
.price {
  width: 100%;
  color: #909399;
  font-weight: 500;
  .large {
    font-size: 18px;
    color: #f90;
    font-weight: 400;
  }
  .el-table-column {
    cursor: pointer;
  }
  .height-light {
    color: #f90;
  }
}
.info {
  width: 1000px;
  height: 240px;
  margin: 40px 0;
  .info-hd {
    padding: 20px 10px;
    font-size: 14px;
  }
  .info-ft {
    display: flex;
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    .info-bd {
      flex: 1;
    }
  }
  .info-sd {
    box-sizing: border-box;
    padding: 20px 10px;
    font-size: 14px;
    .info-bd-sd {
      width: 64px;
      height: 29px;
      border: 1px solid #eee;
      padding: 4px 10px;
      margin-right: 10px;
      border-radius: 4px;
      background-color: #eee;
      color: #666;
    }
  }
  .el-row {
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
}
.comment {
  width: 1000px;
  height: 135px;
  h4 {
    font-size: 16px;
    font-weight: bold;
  }
  .comment-list {
    height: 114px;
    width: 100%;
    padding: 20px 0;
    .comment-star {
      height: 74px;
      margin-top: 20px;
      position: relative;
      /deep/ .el-rate__icon {
        font-size: 24px;
      }
      .stamp {
        font-size: x-large;
        color: #f7ba2a;
        z-index: -1;
        position: absolute;
        left: 20px;
        top: -20px;
        border: 2px solid #fa3;
        text-align: center;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        opacity: 0.25;
        transform: rotate(-30deg);
      }
    }
    .ball {
      height: 74px;
      position: relative;
      .ball-word {
        width: 35px;
        height: 42px;
        color: #f7ba2a;
        position: absolute;
        top: 50%;
        left: 28%;
        text-align: center;
        transform: translate(-50%, -50%);
      }
      /deep/.el-progress__text {
        opacity: 0;
      }
    }
  }
}
</style>